<template>
  <div>
    <template v-if="!showError">
      <div :id="id" class="wrapper" v-loading="loading" :ref="id"></div>
      <div class="radio-group">
        <el-radio-group
          v-model="time"
          v-if="this.chartType === 1 || this.chartType === 2"
          @change="timeChange"
        >
          <el-radio-button :label="0">1小时</el-radio-button>
          <el-radio-button :label="1">6小时</el-radio-button>
          <el-radio-button :label="2">1天</el-radio-button>
        </el-radio-group>
      </div>
    </template>
    <out-of-service :note="outNote" v-if="showError"></out-of-service>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts/lib/echarts' // 引入基本模板
import 'echarts/lib/chart/line' // 引入折线图组件
import 'echarts/lib/component/tooltip' // 引入提示框和图例组件
import 'echarts/lib/component/legend'
import OutOfService from '@/components/outOfService.vue'
export default {
  components: {
    OutOfService
  },
  props: {
    id: {
      type: String
    },
    title: {
      type: String
    },
    chartType: {
      type: Number
    },
    monitorType: {
      type: Number
    },
    trendType: {
      type: Number
    },
    hostId: {
      type: String
    },
    status: {
      type: Number
    }
  },
  data() {
    return {
      time: 0,
      showError: false,
      outNote: '暂无图表',
      loading: true
    }
  },
  computed: {
    ...mapState({
      cpuData: state => state.hostList.cpuData,
      memoryData: state => state.hostList.memoryData,
      tamperData: state => state.summary.tamperData,
      attackData: state => state.summary.attackData,
      cpuTime: state => state.hostList.cpuTime,
      memoryTime: state => state.hostList.memoryTime,
      tamperTime: state => state.summary.tamperTime,
      attackTime: state => state.summary.attackTime
    })
  },
  methods: {
    timeChange() {
      this.loadCpuMemoryData()
    },
    loadCpuMemoryData() {
      let action = this.monitorType === 0 ? 'getCpuData' : 'getMemoryData'
      this.loading = true
      this.showError = false
      this.$store
        .dispatch(action, {
          hostId: this.hostId,
          time: this.time,
          type: this.monitorType === 0 ? 1 : 2, //性能监控页面监控类型 1:cpu监控2：内存监控
          status: this.status
        })
        .then(_ => {
          this.init()
          this.loading = false
        })
        .catch(error => {
          this.loading = false
          this.showError = true
          this.$message.error(error.errorMessage)
        })
    },
    loadSummaryData() {
      let action = this.trendType === 0 ? 'getTamperData' : 'getAttackData'
      this.loading = true
      this.showError = false
      this.$store
        .dispatch(action, {
          type: this.trendType === 0 ? 1 : 2 //概览页面趋势类型 1：攻击2：篡改
        })
        .then(_ => {
          if (this.tamperData.length === 0 && this.trendType === 0) this.showError = true
          if (this.attackData.length === 0 && this.trendType !== 0) this.showError = true
          this.init()
          this.loading = false
        })
        .catch(error => {
          this.loading = false
          this.showError = true
          this.$message.error(error.errorMessage)
        })
    },

    getXData() {
      if (this.chartType === 0 && this.trendType === 0) {
        return this.tamperTime
      } else if (this.chartType === 0 && this.trendType === 1) {
        return this.attackTime
      } else if (this.chartType === 1) {
        return this.cpuTime
      } else if (this.chartType === 2) {
        return this.memoryTime
      }
    },
    getYData() {
      if (this.chartType === 0 && this.trendType === 0) {
        return this.tamperData
      } else if (this.chartType === 0 && this.trendType === 1) {
        return this.attackData
      } else if (this.chartType === 1) {
        return this.cpuData
      } else if (this.chartType === 2) {
        return this.memoryData
      }
    },

    init() {
      let colors = ['#5793f3', '#d14a61', '#675bba', '#555555']
      const option = {
        color: colors,
        tooltip: {
          //提示框设置
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          formatter: function(param) {
            if (param[0].seriesName === '篡改次数统计') {
              param[0].seriesName = '篡改次数'
            } else if (param[0].seriesName === '攻击次数统计') {
              param[0].seriesName = '攻击次数'
            }
            return (
              param[0].marker +
              '时间' +
              ':' +
              '&nbsp' +
              param[0].axisValue +
              '<br/>' +
              param[0].marker +
              param[0].seriesName +
              ':' +
              '&nbsp' +
              param[0].value
            )
          }
        },
        legend: {
          show: this.chartType === 0 ? true : false,
          data: [{ name: this.title, icon: 'rect' }],
          padding: 10,
          itemWidth: 41,
          itemHeight: 2,
          selectedMode: false,
          right: 23,
          top: -8,
          textStyle: {
            color: '#333333',
            rich: {
              fontWeight: 400,
              b: { color: '#5793f3' }
            }
          }
        },
        grid: {
          left: 60,
          top: 45,
          bottom: 55,
          x: 50,
          x2: 30,
          y2: 30
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0, //代表显示所有x轴标签显示
              margin: 15,
              fontsize: 12,
              textStyle: {
                color: '#333333'
              },
              formatter: function(value) {
                let time = value.substring(0, 3)
                let dot = value.substring(3, 5)
                return time + '\n' + '\n' + dot
              },
              margin: 20
            },
            axisTick: {
              alignWithLabel: true,
              length: 10
            },
            axisLine: {
              lineStyle: {
                color: '#d9d9d9'
              }
            },
            data: this.getXData()
          }
        ],
        yAxis: [
          {
            name:
              this.chartType === 0
                ? ' '
                : this.chartType === 1
                ? 'cpu使用率 (%)'
                : '内存使用率 (%)',
            type: 'value',
            splitNumber: 4,
            splitLine: {
              show: true, //背景底线去掉
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLine: {
              show: false //y轴
            },
            axisTick: {
              show: false //y轴刻度线
            }
          }
        ],
        series: [
          {
            name: this.title,
            type: 'line',
            smooth: true,
            data: this.getYData(),
            symbol: 'none',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(51, 125, 255, 0.1)'
                },
                {
                  offset: 1,
                  color: 'rgba(51, 125, 255, 0)'
                }
              ])
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#337DFF'
                }
              }
            }
          }
        ]
      }
      //初始化图表
      const chartObj = echarts.init(document.getElementById(this.id))
      chartObj.setOption(option)
      let sizeFun = function() {
        chartObj.resize()
      }
      window.addEventListener('resize', sizeFun)
    }
  },
  created() {},
  mounted() {
    if (this.chartType === 0) {
      this.$nextTick(() => {
        this.loadSummaryData()
      })
    } else {
      this.$nextTick(() => {
        this.loadCpuMemoryData()
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.chartObj)
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  height: 230px;
}
.radio-group {
  position: absolute;
  top: 0;
  right: 20px;
}
</style>
